$(function(){
    // 初始化表格
    initTable();
    // 加载学生列表
    loadStudentList();
});

let layerIndex;

// 初始化表格
function initTable() {
    layui.use(['table', 'form'], function(){
        const table = layui.table;
        const form = layui.form;

        // 渲染表格
        renderTable(table);

        // 表单提交事件
        form.on("submit(stud-dlg)", function (data) {
            event.preventDefault();
            commitStudentDialog();
            return false;
        });
    });
}

// 渲染表格
function renderTable(table) {
    let student = getSearchCondition();

    table.render({
        elem: '#tbStudent',
        url: '/api/student/getbypage',
        method: "POST",
        contentType: 'application/json',
        where: {data: student},
        page: true,
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'id', fixed: 'left', width: 80, title: 'id', sort: true},
            {field: 'name', title: '姓名'},
            {
                field: 'sno',
                title: '学号',
                width: 150,
            },
            {
                field: 'sex', width: 150, title: '性别', sort: true,
                templet: d => d.sex === 1 ? '男' : (d.sex === 2 ? '女' : '未知'), // 自定义性别显示
            },
            {
                field: 'age',
                width: 150, title: '年龄', sort: true
            },
            {
                fixed: 'right',
                title: '操作', width: 200, minWidth: 150, templet: '#editTemplate' // 操作列，使用自定义模板
            }
        ]],
        done: function(rs) {
            if (rs.data.length === 0) {
                layer.msg('没有找到相关数据');
            }
        }
    });
}


/**
 * 弹出学生新增/更新对话框
 */
function showStudentDlg(id) {
    let title = "新增学生";
    if(id){
        // 是编辑
        title = "编辑学生";
        $("#formId").css("display", "block");

        // 读取学生信息，并赋值
        $.ajax({
            url: "/api/student/" + id,
            method: "GET",
        }).done(result => {
            console.log("获取的学生数据:", result);

            // 确保result.data存在，如果后端返回的是{code:200, data:{...}}结构
            const studentData = result.data || result;

            // 填充表单数据
            fillForm(studentData);

            // 打开弹层
            openLayer(title);
        }).fail(error => {
            console.error("获取学生信息失败:", error);
            layer.msg('获取学生信息失败', {icon: 2});
        });
    } else {
        // 是新增
        $("#studForm")[0].reset();
        $("#formId").css("display", "none");
        openLayer(title);
    }
}

// 填充表单数据
function fillForm(data) {
    console.log("填充表单数据:", data);

    // 确保表单字段名称与后端返回的字段名称一致
    const fieldMapping = {
        'id': 'id',
        'sno': 'sno',
        'name': 'name',
        'sex': 'sex',  // 注意这里与表单中的name="sex"一致
        'age': 'age'
    };

    // 填充每个字段
    Object.keys(fieldMapping).forEach(key => {
        const formFieldName = fieldMapping[key];
        const value = data[key];
        const field = $(`#studForm [name="${formFieldName}"]`);

        if (field.length > 0) {
            if(field.is(':radio')) {
                field.filter(`[value="${value}"]`).prop('checked', true);
            } else if(field.is(':checkbox')) {
                field.prop('checked', value === "yes");
            } else {
                field.val(value);
            }
        }
    });

    // 重新渲染表单，特别是单选按钮
    layui.form.render();
}

// 打开弹层
function openLayer(title) {
    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ["520px", "auto"],
        content: $("#studForm")
    });
}


function commitStudentDialog() {
    let id = $("#id").val();
    let formData = $("#studForm").serialize();
    let url, method;

    if(id) {
        url = "/api/student/update";
        method = "PUT";
    } else {
        url = "/api/student/add";
        method = "POST";
    }

    $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");

    $.ajax({
        url: url,
        method: method,
        data: formData
    }).done(result => {
        console.log("提交结果:", result); // 添加调试日志

        // 修改判断条件，适配不同的返回结构
        if(result && (result.id || result.code === 200 || result.success)) {
            layer.msg('操作成功', {icon: 1});
            reloadTable();

            // 确保关闭所有弹窗，而不仅仅是当前layerIndex
            layer.closeAll();
        } else {
            layer.msg(result.msg || '操作成功，但返回数据异常', {icon: 1});
            reloadTable();
            layer.closeAll();
        }
    }).fail(error => {
        console.error("请求失败:", error);
        layer.msg('操作失败: ' + (error.responseJSON?.msg || error.statusText), {icon: 2});
    }).always(() => {
        $("#btnOK").prop("disabled", false).removeClass("layui-btn-disabled");
    });
}

// 打开弹层
function openLayer(title) {
    // 先关闭所有可能存在的弹窗
    layer.closeAll();

    // 打开新弹窗并保存索引
    layerIndex = layer.open({
        type: 1,
        title: title,
        area: ["520px", "auto"],
        content: $("#studForm"),
        end: function() {
            // 弹窗关闭时重置表单
            $("#studForm")[0].reset();
        }
    });
}

// 重新加载表格
function reloadTable() {
    const table = layui.table;
    let student = getSearchCondition();

    table.reload('tbStudent', {
        where: {data: student},
        page: {curr: 1}
    });
}

// 获取搜索条件
function getSearchCondition() {
    let formData = {};

    $('#queryForm').find('input, select').each(function() {
        let name = $(this).attr('name');
        let value = $(this).val();

        if (name && value) {
            formData[name] = value;
        }
    });

    return formData;
}

// 搜索功能
function search() {
    reloadTable();
}

// 删除确认
function deleteConfirm() {
    const table = layui.table;
    const checkStatus = table.checkStatus('tbStudent');

    if(checkStatus.data.length === 0) {
        layer.msg('请选择要删除的数据', {icon: 2});
        return;
    }

    layer.confirm('确定删除选中的 ' + checkStatus.data.length + ' 条数据吗？', {
        icon: 3,
        title: '删除确认'
    }, function(index) {
        let ids = checkStatus.data.map(item => item.id);
        batchDelete(ids);
        layer.close(index);
    });
}

// 批量删除
function batchDelete(ids) {
    $.ajax({
        url: "/api/student/deleteBatch",
        method: "DELETE",
        contentType: "application/json",
        data: JSON.stringify(ids)
    }).done(result => {
        layer.msg('删除成功', {icon: 1});
        reloadTable();
    }).fail(error => {
        console.error("删除失败:", error);
        layer.msg('删除失败', {icon: 2});
    });
}

// 单个删除
function deleteById(id) {
    layer.confirm('确定要删除这条数据吗？', {
        icon: 3,
        title: '删除确认'
    }, function(index) {
        $.ajax({
            url: "/api/student/delete/" + id,
            method: "DELETE"
        }).done(result => {
            layer.msg('删除成功', {icon: 1});
            reloadTable();
        }).fail(error => {
            console.error("删除失败:", error);
            layer.msg('删除失败', {icon: 2});
        });
        layer.close(index);
    });
}

// 表格工具事件
layui.table.on('tool(tbStudent)', function(obj) {
    const data = obj.data;

    if(obj.event === 'edit') {
        showStudentDlg(data.id);
    } else if(obj.event === 'delete') {
        deleteById(data.id);
    }
});

// 加载学生列表
function loadStudentList() {
    $.ajax({
        url: "/api/student/list"
    }).done(function(data) {
        let html = "";
        data.forEach((element, index) => {
            html += "<tr>";
            html += "<td>" + element.id + "</td>";
            html += "<td>" + element.name + "</td>";
            html += "<td>" + element.sex + "</td>";
            html += "<td>" + element.age + "</td>";
            html += "<td>" + element.sno + "</td>";
            html += "<td><a href='#' onclick='showStudentDlg(" + element.id + ")'>编辑</a> &nbsp;&nbsp;<a href='#' onclick='deleteById(" + element.id + ")'>删除</a></td>";
            html += "</tr>";
        });
        $("#studentTb").html(html);
    });
}